import React from 'react';

class UnControlledDemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '双越',
      flag: true,
    }
    this.nameInputRef = React.createRef() // 创建 ref
    this.fileInputRef = React.createRef()
  }
  render() {
    return (
      <div>
        <h4>1. defaultValue</h4>
        {/* 使用 defaultValue 而不是 value ，使用 ref */}
        <input defaultValue={this.state.name} ref={this.nameInputRef} />
        {/* state 并不会随着改变 */}
        <span>state.name: {this.state.name}</span>
        <button onClick={this.alertName}>alert name</button>
        <h4>2. defaultChecked</h4>
        <input type="checkbox" defaultChecked={this.state.flag} />
        <h4>3. file</h4>
        <input type="file" ref={this.fileInputRef} />
        <button onClick={this.alertFile}>alert file</button>
      </div>
    )
  }
  alertName = () => {
    const elem = this.nameInputRef.current // 通过 ref 获取 DOM 节点
    alert(elem.value) // 不是 this.state.name
  }
  alertFile = () => {
    const elem = this.fileInputRef.current // 通过 ref 获取 DOM 节点
    alert(elem.files[0].name)
  }
}

export default UnControlledDemo;
